<template>
  <div class="views" id="views" @touchmove.prevent @mousewheel.prevent>
    <div id="container" class="container"></div>
  </div>
</template>

<script>
import * as THREE from 'three/build/three.module'
import {App} from '@/assets/App/App'

const threeApp = new App()
export default {
  props: ['home'],
  data() {
    return {
      params: {
        methods: {
          animation: true,
          renderer: true,
          light: true,
          controls: true,
          TWEEN: true,
          postprocessing: true,
          statement: true
        },
        events: {
          windowResize: true
        },
        params: {
          containerId: 'container',
          renderer: [
            'WebGLRenderer'
          ],
          controls: [
            'OrbitControls'
          ],
          rendererParams: {
            antialias: true
          },
          postprocessing: [
            'OutlinePass'
          ]
        }
      }
    }
  },
  mounted() {
    this.home.loading()
    /**
     * 初始化场景
     */
    threeApp.init(this.params, (scene, camera, renderer) => {
      // 重设相机初始位置
      camera.position.set(-16000, 4800, 16000)

      // 设置相机俯仰视角范围
      threeApp.orbitControls.autoRotate = false
    })

    threeApp.addModel({
      url: 'static/model/fbx/torch/yry/floor4.FBX',
      type: 'fbx',
      name: 'jxl'
    }, (obj) => {
      obj.position.set(0, 0, 0)
      obj.scale.set(0.05, 0.05, 0.05)
      this.home.loadOver()
      // 相机飞行
      threeApp.flyTo({
        position: [8000, 2400, 0],
        controls: [0, 0, 0],
        duration: 3000
      })

      // 添加双击事件
      threeApp.addOn(threeApp.scene, 'dblclick', (objList) => {
        const obj = objList[0].object
        const group = obj.parent

        threeApp.flyToObj(group, { vector: new THREE.Vector3(0.7, 0.7, 0.7) })
        // alert(`双击点引出的射线拾取到了${objList.length}个Mesh对象\n
        //   其中距离相机最近的Mesh对象所在组的名字为${group.name}\n
        //   该组中心点坐标为(${group.position.x},${group.position.y},${group.position.z})\n
        //   双击点与该组交点为(${objList[0].point.x},${objList[0].point.y},${objList[0].point.z})\n
        //   相机与该组中心点相距${objList[0].distance}`)
      }, 'dblclick_jxl', {
        recursive: true
      })

      // 添加鼠标移动事件
      threeApp.addOn(threeApp.scene, 'mousemove', (objList) => {
        const obj = objList[0].object
        const group = obj.parent
        threeApp.outlinePass.selectedObjects = [group]
      }, 'mousemove_jxl', {
        recursive: true
      }, () => {
        threeApp.outlinePass.selectedObjects = []
      })
    }, (progress) => {
      progress = parseInt((progress.loaded / progress.total) * 100)
      this.home.loadProgress(progress)
    })
  },
  beforeDestroy () {
    threeApp.rmOn('dblclick', 'dblclick_jxl')
    threeApp.rmOn('mousemove', 'mousemove_jxl')
  }
}
</script>

<style scoped>
.views {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
}
</style>
